@import "./variables.scss";

.fty-card {
  margin: 5px;
  border: 1px solid #edf2f9;
  //box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
  min-height: 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 6px;

  >.fty-card-img {
    text-align: center;
    width: 100%;
  }

  &.fty-background-color {
    &::before {
      background-color: $mainColor;
      content: '';
      display: block;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 35%;
    }

    .bg-dark {
      background-color: $mainColor;
    }

    &.bg-height-35p {
      &::before {
        height: 35%;
      }
    }

    &.bg-height-25p {
      &::before {
        height: 25%;
      }
    }

    &.bg-height-20p {
      &::before {
        height: 20%;
      }
    }


    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    justify-content: center;
  }

  .fty-card-header {
    padding: 1em;
    font-size: 1.1em;
    position: relative;
    border-bottom: 1px solid #edf2f9;
    border-top: 1px solid #edf2f9;

    &:first-child {
      border-top: 0;
    }

    .button-box {
      position: absolute;
      bottom: 0.5em;
      right: 0.8em;

      &.button-flex {
        display: flex;
        justify-content: space-between;

        button {
          font-size: 1em;

          &:hover {
            color: #2C7BE5;
          }
        }
      }
    }
  }

  >.fty-card-body {
    margin: 1.2em;
    position: relative;
    >.fty-card-title {}

    >.fty-card-title-sub {
      font-size: 0.9em;
      color: #95aac9 !important;
    }

    >.fty-card-title-sub-danger {
      font-size: 0.9em;
      color: #F87171 !important;
    }
  }

  .fty-card-footer {
    border-top: 1px solid #edf2f9;
    padding: 10px 0.8em;
    border-top: 1px solid #edf2f9;
    font-size: 1.2em;
  }

}
